<template>
  <div class="home">
    <el-form :inline="true" :model="content" class="demo-form-inline">
      <el-form-item >
        <el-input v-model="content.USERS_username" placeholder="请输入快递员名称"></el-input>
      </el-form-item>
      <el-form-item >
       <el-input v-model="content.USERS_phone" placeholder="请输入快递员电话"></el-input>
       </el-form-item>
      <el-form-item>
        <el-button round type="primary" icon="el-icon-search" @click="onSubmit"
          >搜索</el-button>
          <el-button round type="primary" icon="el-icon-search" @click="onSubmit1"
          >重置</el-button>
      </el-form-item>
    </el-form>
    <el-table 
    :data="tableData">
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.scopeEmployeeId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="编号" width="180" align="center">
        <template slot-scope="scope">
          <span style="margin-left: -1px">{{ scope.row.scopeEmployeeEmployeeId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="120">
        <template slot-scope="scope">
          <span style="margin-left: -1px">{{ scope.row.tmsUsers.usersUsername }}</span>
        </template>
      </el-table-column>
       <el-table-column label="手机号" width="120">
        <template slot-scope="scope">
          <span style="margin-left: -10px">{{ scope.row.tmsUsers.usersPhone }}</span>
        </template>
      </el-table-column>
       <el-table-column label="所属机构" width="180" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 1px">{{ scope.row.tmsOrgan.isName }}</span>
        </template>
      </el-table-column>
       <el-table-column label="快递员APP账号" width="180" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.tmsUsers.usersAccountNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            style="margin-left: -12px"
            size="mini"
            icon="el-icon-edit"
            type="warning"
            round
            @click="handleup(scope.$index,scope.row)"
            >作业范围分配</el-button>
          <el-button
            style="margin-left: -12px"
            size="mini"
            type="primary"
            round
            icon="el-icon-more"
            @click="handleEdit(scope.$index,scope.row)"
            >快递员详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="content.page"
      :page-sizes="[2, 3, 4]"
      :page-size="content.num"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="dialogFormVisible" center width="40%">
      <el-form :model="form" ref="form" >
        <el-form-item label="员工编号" prop="scopeEmployeeEmployeeId" :label-width="formLabelWidth">
          <el-input v-model="form.scopeEmployeeEmployeeId" style="width: 220px" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="快递员姓名" prop="usersUsername" :label-width="formLabelWidth">
          <el-input v-model="form.usersUsername" style="width: 220px" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="usersPhone" :label-width="formLabelWidth">
          <el-input v-model="form.usersPhone" style="width: 220px" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="所属机构" prop="isName" :label-width="formLabelWidth">
          <el-input v-model="form.isName" style="width: 220px" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button round type="info" @click="dialogFormVisible = false">返 回</el-button>
      </div>
    </el-dialog>

    <el-dialog title="作业范围分配" :visible.sync="centerDialogVisible" center width="62%">
        <template>
            <div class="zt">
                <bm-control>
                    <el-button v-if="this.tj!='tj'" type="primary" @click="tijiao()" class="bj">提交</el-button>
                    <el-button v-if="this.bj!='bj'" type="primary" @click="bianji()" class="bj">编辑</el-button>
                    <el-button v-if="this.qx!='qx'" type="primary" @click="quxiao()" class="bj">取消</el-button>
                </bm-control>
            </div>
            <div class="huizhi">
            <el-button v-if="this.xs!='xs'" type="primary" @click="toggle('polygonPath')" class="bj">{{ polygonPath.editing ? '停止绘制' : '开始绘制' }}</el-button>
            </div>
            <div class="ts"  v-if="this.ts!='ts'">
            <h4><i class="el-icon-warning-outline"></i>点击鼠标绘制电子围栏，右击鼠标结束图形绘制。完成绘制后，点击提交按钮保存。仅支持绘制单个电子围栏区域</h4>
            </div>
            <div class="mapbox">
                <baidu-map
                :center="center"
                :zoom="zoom"
                :map-click="false"
                @ready="handler"
                style="height:550px;width:730px;"
                @click="paintPolygon"
                @rightclick="newPolygon"
                >
                <!--机构作业范围-->
                <bm-polygon
                    :path="path1"
                    v-for="path1 of polygonPath1.paths"
                    :key="path1.toString()"
                    stroke-color="black"
                    fill-color="silver"
                    :fill-opacity="0.5"
                    :stroke-opacity="0.5"
                    :stroke-weight="2"
                />
                <!--快递员作业范围-->
                <bm-polygon
                    :path="path"
                    v-for="path of polygonPath.paths"
                    :key="path.toString()"
                    stroke-color="red"
                    fill-color="silver"
                    :fill-opacity="0.5"
                    :stroke-opacity="0.5"
                    :stroke-weight="2"
                    :editing="editing" 
                    @lineupdate="updatePolygonPath" 
                />
                </baidu-map>
            </div>
        </template>
        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">关 闭</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
export default Vue.extend({
  data(){
    return{
        xs:"xs",
        bj:"zxc",
        qx:'qx',
        tj:"tj",
        ts:"ts",
        xx:[],
        xx1:[],
        dtqy:"",
        scopeEmployeeId:'',
        scopeEmployeeLatitudeAndLongitudeArray:'',
        center: { lng: 116.412732, lat: 39.911707 },
        zoom: 13,
        editing: false,
        //快递员范围
        polygonPath: {
            editing: false,
            paths: [] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
        },
        //机构作业范围
        polygonPath1: {
            editing: false,
            paths: [] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
        },
      tableData:[],
      total: 0,
      dialogFormVisible: false, //是否显示dialog，默认不显示
      centerDialogVisible: false,
      formLabelWidth: "180px",
      content: {
        page: 1,
        num: 2,
        USERS_username: "",//快递员姓名
        USERS_phone:"",//快递员电话
      },
      form: {
        scopeEmployeeId:"",//快递员序号
        usersUsername:"",//快递员姓名
        scopeEmployeeEmployeeId: "",//员工编号
        usersPhone: "",//快递员电话
        isName:"",//所属机构
      },
    }
  },
  methods:{
     tijiao(){
          var jwd=""
          console.log(this.scopeEmployeeLatitudeAndLongitudeArray)
          for(var i=0;i<this.scopeEmployeeLatitudeAndLongitudeArray[0].length;i++){
               jwd += this.scopeEmployeeLatitudeAndLongitudeArray[0][i].lng+","+this.scopeEmployeeLatitudeAndLongitudeArray[0][i].lat+","
          }
          if (jwd.length > 0) {
          jwd = jwd.substr(0, jwd.length - 1);
          }
         axios.get("/api/network-tms-scope-employee/updByFanwei?scopeEmployeeId="+this.scopeEmployeeId+"&scopeEmployeeLatitudeAndLongitudeArray="+jwd).then((data) => {
           if(data.data){
                this.bj="zxc"
                this.xs="xs"
                this.qx="qx"
                this.tj="tj"
                this.ts='ts'
                this.$notify({
            title: '成功',
            message: '网点编辑成功',
            type: 'success'
            });
            this.polygonPath.paths = []
           }else{
             this.$notify.error({
                title: '失败',
                message: '网点编辑失败',
             })
           }
           this.centerDialogVisible=false;
           this.load();
        });
        },
     bianji(){
        if(this.polygonPath.paths==''){
            this.$notify.error({
            title: '错误',
            message: '请先选择区域点！！！'
            });
        }else{
        this.bj="bj"
        this.xs="bj"
        this.qx="xx"
        this.tj="zxc"
        this.ts='cc'
        }
     },
     quxiao(){
        this.bj="zxc"
        this.xs="xs"
        this.qx="qx"
        this.tj="tj"
        this.ts='ts'
        this.polygonPath.paths = []
        this.polygonPath1.paths = []
     },
    load(){
      //获取快递员信息
      axios.post("/api/network-tms-scope-employee/getAllPage",this.content).then(data=>{
        console.log(data.data.rows)
        this.tableData = data.data.rows; //获取分页数据
        this.total = data.data.total; //获取总记录数
      })
    },
    handleEdit(index,row){
      this.form.usersUsername=row.tmsUsers.usersUsername;
      this.form.scopeEmployeeEmployeeId=row.scopeEmployeeEmployeeId;
      this.form.usersPhone=row.tmsUsers.usersPhone;
      this.form.isName=row.tmsOrgan.isName;
      this.dialogFormVisible=true;
    },
    handleup(index,row){
        this.centerDialogVisible=true;
        this.editing=false
        this.scopeEmployeeId = row.scopeEmployeeId
        //快递员范围
        this.polygonPath.paths = []
        //机构范围
        this.polygonPath1.paths=[]
        if(row.tmsInstitutionalOperations.ipAddressLatitude!=null || row.tmsInstitutionalOperations.ipLatitudeLongitudeRange!=null){
            //快递员范围
            var bb=row.scopeEmployeeLatitudeAndLongitudeArray.split(",");
            this.xx=bb;
            var map_points1=[];
                for (let i = 0; i < this.xx.length; i++) {
                map_points1.push(new window.BMap.Point(this.xx[i],this.xx[i+1]))
                i++;
                }
            this.polygonPath.paths.push(map_points1)
            //console.log(this.polygonPath.paths)
            this.scopeEmployeeLatitudeAndLongitudeArray = this.polygonPath.paths
        }else{
            this.quxiao()
        }
        if(row.ipAddressLatitudes!=null){
            //机构范围
            this.dtqy=row.tmsInstitutionalOperations.ipAddressLatitude.split(",");
            this.center.lng = this.dtqy[0];
            this.center.lat = this.dtqy[1];
            var bb1=row.tmsInstitutionalOperations.ipLatitudeLongitudeRange.split(",");
            this.xx1=bb1;
            var map_points2=[];
                for (let j = 0; j < this.xx1.length; j++) {
                map_points2.push(new window.BMap.Point(this.xx1[j],this.xx1[j+1]))
                j++;
                }
            this.polygonPath1.paths.push(map_points2)
        }
    },
    handler ({ BMap, map }) {
      map.enableScrollWheelZoom(true)
    },
    // 开启多边形绘制
    toggle (name) {
      this.editing=true
      this[name].editing = !this[name].editing
      if(this[name].editing == false){this.editing=false}
      // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
      if (this.polygonPath.paths && this.polygonPath.editing) {
        // this.polygonPath.paths = []
      }
    },
    // 鼠标移动时
    // syncPolygon (e) { @mousemove="syncPolygon"
    //   if (!this.polygonPath.editing) {
    //     return
    //   }
    //   const { paths } = this.polygonPath
    //   if (!paths.length) {
    //     return
    //   }
    //   const path = paths[paths.length - 1]
    //   if (!path.length) {
    //     return
    //   }
    //   if (path.length === 1) {
    //     path.push(e.point)
    //   }
    //   this.$set(path, path.length - 1, e.point)
    // },
    // 鼠标右键点击时往路径里push一个面
    newPolygon (e) {
      this.editing=false
      //console.log(e.point.lng)
      //console.log(e.point.lat)
      if (!this.polygonPath.editing) {
        return
      }
      // 当开始绘制后把按钮调回开始绘制状态，防止绘制多个图形
      this['polygonPath'].editing = !this['polygonPath'].editing
      const { paths } = this.polygonPath
      if (!paths.length) {
        paths.push([])
      }
      const path = paths[paths.length - 1]
      path.pop()
      if (path.length) {
        paths.push([])
      }
       this.scopeEmployeeLatitudeAndLongitudeArray = this.polygonPath.paths
    },
    // 鼠标左键多边形绘制
    paintPolygon (e) {
        console.log("南极")
      var c=false;
      var testx = parseFloat(e.point.lng);
      var testy = parseFloat(e.point.lat);
      //判断地图上是否有区域范围
      if(this.polygonPath1.paths.length!=0){
      var lenth= this.polygonPath1.paths[0].length;
       for(var i=0,j=lenth-1;i<lenth;j=i++){
        //判断点的经纬度是否在该范围
            if (this.polygonPath1.paths[0][i].lat > testy !=this.polygonPath1.paths[0][j].lat > testy && 
            testx <((this.polygonPath1.paths[0][j].lng - this.polygonPath1.paths[0][i].lng) *
                (testy - this.polygonPath1.paths[0][i].lat)) /
                (this.polygonPath1.paths[0][j].lat - this.polygonPath1.paths[0][i].lat) +
                this.polygonPath1.paths[0][i].lng
            )
            c=!c;    
       }
       if(c){}else{
        this.centerDialogVisible=false;
        this.$notify.error({
            title: '错误',
            message: '快递员的工作范围超出该网点范围！！！'
            });
       }
       console.log(c);
      }else{
        this.$notify.error({
        title: '错误',
        message: '请先选择区域点！！！'})
      }
      if (!this.polygonPath.editing) {
        return
      }
      const { paths } = this.polygonPath
      !paths.length && paths.push([])
      paths[paths.length - 1].push(e.point)
    },
    updatePolygonPath(e) {
        //编辑覆盖物时触发，获取坐标点集合	
      this.polygonPath.paths[0] = e.target.getPath()
    },
    onSubmit(){
       this.load();
    },
    onSubmit1(){
      this.content.USERS_username="",
      this.content.USERS_phone="",
      this.load();
    },
    handleSizeChange(val){
       this.content.num = val;
       this.load();
    },
    handleCurrentChange(val){
       this.content.page = val;
       this.load();
    },
  },
  created(){
    this.load();
   },
})
</script>

<style scoped>
.mapbox{
    position: relative;
    top: 10px;
    left: 30px;
}
.zt{
    color: #081123;
    background: hwb(202 85% 3%);
    border-radius: 9px;
    height: 45px;
}
*{
		margin: 0px;
	}
.el-row {
    margin-bottom: 20px;
   }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #f9fafc;
  }
  .bg-purple {
    background: #f9fafc;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 950px;
    opacity: 0.85;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .grid-content1 {
    border-radius: 4px;
    min-width: 600px;
    min-height: 500px;
    opacity: 0.85;
  }
  .ts{
    position: relative;
    left: 80px;
    color: red;
    top: -5px;
  }
  .zt1{
    color: rgb(87, 64, 201);
    font: 1em sans-serif;
    position: relative;
    top: 10px;
  }
  .zy{
    position: relative;
    top: 10px;
  }
  .bj{
    position: relative;
    left: 630px;
    top: 3px;
  }
  .jgc{
    position: relative;
    top: 10px;
  }
   .bg-purple1 {
    background: #f9fafc;
    border-radius: 9px;
  }
  .huizhi{
    position: relative;
    left: -650px;
    top: 25px;
  }
</style>
